<template>
    <div class="login-container">
        <van-nav-bar
        right-text="注册"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
        @click-right="register"
        />
        <img src="https://m.sparke.cn/_nuxt/img/ic_logo.b351957.png"/>
         
        <van-cell-group>
        <van-field
            v-model="phone"
            placeholder="请输入手机号"
            size="samll"
            clearable
            :error-message="errorMessage.phoneInput"
        />
         <van-field
        v-model="pwd"
        clearable
        placeholder="请输入密码"
        type="password"
        autofocus
        :error-message="errorMessage.pwdInput"
       />
   </van-cell-group>
       <button class="button" @click="checkFrom">登录</button>
       <router-link class="a" :to="{path:'/register'}">忘记密码？</router-link>
    </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      code: "",
      pwd: "",
      errorMessage: { phoneInput: "", pwdInput: "" },
      phoneState: false,
      pwdState: false
    };
  },
  watch: {
    pwd() {
      this.checkPwd();
    },
    code() {
      this.checkCode();
    },
    phone() {
      this.checkPhone();
    }
  },
  methods: {
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.errorMessage.phoneInput = "";
        this.phoneState = true;
      } else {
        this.errorMessage.phoneInput = "手机号码格式错误!";
        this.phoneState = false;
        return;
      }
    },

    //验证短信验证码
    checkCode() {},
    //验证密码框
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.errorMessage.pwdInput = "";
        this.pwdState = true;
      } else {
        this.errorMessage.pwdInput = "密码格式错误!";
        this.pwdState = false;
        return;
      }
    },
    register() {
      this.$router.push(`/register`);
    },
    checkFrom() {
      this.checkPhone();
      this.checkPwd();
      if ((this.phoneState = this.pwdState)) {
        // 发送post请求，传递两个参数：username  password
        this.axios
          .post("/user/login", `phone=${this.phone}&spwd=${this.pwd}`)
          .then(res => {
            // console.log(res.data);
            if (res.data.code == 1) {
              // 注册成功
              this.$toast("登录成功！");
              //保存两种号码格式传入store
              let phone = "" + this.phone;
              let phoneHide = phone.substr(0, 3) + "****" + phone.substr(7);
              this.$store.commit("phoneValue", [phoneHide, phone]);
              //将登录状态和手机号码保存至浏览器
              sessionStorage.setItem("phoneState", false);
              sessionStorage.setItem("phoneHide", phoneHide);
              sessionStorage.setItem("phone", this.phone);
              this.$router.push(`/me`);
            } else if (res.data.code == -1) {
              // 用户已存在
              this.$toast("用户名或密码错误!");
            }
          });
      }
    }
  }
};
</script>
<style scoped>
.van-cell-group {
  margin-top: 5.5rem;
  margin-bottom: 1.125rem;
  position: absolute;
}
.van-cell {
  font-size: 1.25rem;
}
.button {
  margin-top: 15.5rem;
  width: 100%;
  height: 3.125rem;
  border-radius: 1.25rem;
  color: #ffffff;
  background-color: #1482ff;
  transition: 0.1s;
  border: none;
}
img {
  display: block;
  margin: 0 auto;
  width: 6.25rem;
  height: 6.25rem;
  transition: 0.2s;
}
.a {
  display: block;
  text-align: right;
  color: #1482ff;
  margin-top: 10px;
}
.a:active {
  transform: scale(1.2);
}
.button:active {
  background-color: #6da5e6;
  font-size: 0.8rem;
  transform: scale(0.9);
}
</style>

